<!--
 * @Author: xfworld
 * @Date: 2020-06-08 16:06:54
 * @LastEditors: xfworld
 * @LastEditTime: 2020-06-11 12:13:23
 * @Description:  描述数据格式
 {
    num: 菜单列数量
    iconSize: 图标显示大小，默认0.6
    [{
        icon: 图标信息
        text: 功能名称
        access: 权限码
        uri: 路由名称定义
        events: 功能事件数量
    }]
}

-->
<template>
  <div class="menu">
    <van-grid :column-num="menuNum" clickable :icon-size="iconSize">
      <van-grid-item
        v-for="(item, index) in children"
        :badge="itemBadge(item)"
        :key="index"
        :text="item.text"
        @click="itemRouter(item)"
        v-show="itemHandle(item.access)"
      >
        <span slot="icon">
          <svg-icon :icon-class="item.icon" class="svg-menu-icon"></svg-icon>
        </span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import {oneOf} from "@/libs/tools";
import mixin from "./mixin";
import {mapGetters} from "vuex";
export default {
  name: "gridMenu",
  mixins: [mixin],
  computed: {
    ...mapGetters("user", ["userAccess"]),
    ...mapGetters("user", ["userData"])
  },
  methods: {
    itemBadge(item) {
      if (item.events > 0) {
        return item.events;
      }
      return "";
    },
    itemRouter(item) {
      let url = item.uri;
      if (url !== null && url !== undefined && url !== "") {
        this.$router.push({
          path: url
        });
      } else {
        this.$toast("未配置跳转界面");
      }
    },
    itemHandle(access) {
      if (access !== null && access !== undefined && access !== "") {
        return oneOf(access, this.userAccess);
      } else {
        return true;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.menu {
  /deep/ .van-grid-item__text {
    font-size: 18px;
    margin-top: 10px;
  }
  .svg-menu-icon {
    color: #666;
    font-size: 1.8rem;
  }
}
</style>
